import { Button, Form, Input, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'

const dynamicForm = () => {
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  }

  return (
    <div className="card content-box">
      <Form name='dynamic_form_nest_item' onFinish={onFinish} autoComplete="off">
        <Form.List name="users">
          {
            (fields, { add, remove }) => (
              <>
                {
                  fields.map(({ key, name, ...restField }) => (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item name={[name, "first"]} {...restField}>
                        <Input placeholder="First Name" />
                      </Form.Item>
                      <Form.Item name={[name, "last"]} {...restField}>
                        <Input placeholder="Last Name" />
                      </Form.Item>
                      <MinusCircleOutlined onClick={() => remove(name)} />
                    </Space>
                  ))
                }
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>Add field</Button>
                </Form.Item>
              </>
            )
          }
        </Form.List>
        <Form.Item>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default dynamicForm;